<template>
	<view class="zg-area">
		<view class="area-1" v-if="Object.keys(details2).length > 0" @click="goRouter1">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view>
						<view class="">
							<text>{{details2.name || ''}}</text>
							<text>{{details2.phone || ''}}</text>
						</view>
						<view class="">
							<text>{{details2.province || ''}}{{details2.city || ''}}{{details2.area || ''}}</text>
						</view>
						<view class="">
							<text>{{details2.address || ''}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="area-1-right">
				<uni-icons type="arrowright" size="22" color="#999"></uni-icons>
			</view>
		</view>
		<view class="area-1" v-else @click="goRouter2">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view>请添加收货地址</view>
				</view>
			</view>
			<view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="area-2">
			<view class="area-2-card">
				<!-- <view class="a2c-title">
					<image src="../static/shop.png" mode="widthFix"></image>
					<text>{{details.scName || ''}}</text>
				</view> -->
				<view class="a2c-content">
					<view class="a2c-img">
						<image class="tp-br8" :src="`${shopImgUrl}${details.pic}`" mode="aspectFill"></image>
					</view>
					<view class="a2c-info">
						<view class="a2c-info-title tp-fc333 tp-fw500 ellispsis1">
							{{details.name || ''}}
						</view>
						<view class="a2c-info1">
							<text>{{specification.ggzh}}</text>
						</view>
						<view class="a2c-info2">
							<view class="flex align_baseline tp-fz22 tp-red">
								<text>￥ <text class="tp-fz28 tp-fw600">{{specification.price || 0}}</text></text>
							</view>
							<view class="a2c-info-num">
								<text>x{{specification.quantity || 1}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="area-2-row" v-if="pageName != '积分'">
				<view class="a2r-left">
					优惠券
				</view>
				<view class="a2r-right">
					<text>-{{specification.couponMoney || 0}}元</text>
				</view>
			</view> -->
			<view class="area-2-row">
				<view class="a2r-left">
					积分抵扣
				</view>
				<view class="flex-1 flex flex_end">
					<text>{{details.jfUse ? '使用' + details.jfUse : ''}}{{maxYongJifen}}</text>
					<!-- <input class="tp-tr" type="number" :disabled="specification.jfDeductionAmount == 0" :placeholder="maxYongJifen"
					 v-model="jifen"  /> -->
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					运费
				</view>
				<view class="a2r-right">
					<text>{{details.postage || 0}}元</text>
				</view>
			</view>
			<view class="area-2-row">
				<view class="a2r-left">
					合计
				</view>
				<view class="a2r-right">
					<text class="a2r-price">￥{{totalMoney || 0}}</text>
				</view>
			</view>
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom">
			<view class="ftb-l">
				<text>合计：</text>
				<text class="ftb-price">￥{{totalMoney || 0}}</text>
			</view>
			<view class="ftb-r">
				<button plain @click="createOrder">提交订单</button>
			</view>
		</view>
		<CommonPaySecond ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @cancle="noPay" @closeK="noPay" @payMoney="payMoney"
		 @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import CommonPaySecond from '../common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				pageName: '', // 默认为空， 积分 == 不显示优惠券
				cid: '', // 商品id
				specification: {}, // 商品属性
				details: {}, // 商品详情
				details2: {}, // 默认地址
				form: { // 提交数据
					jifen: 0, //	用户消费的积分(请给个默认值0)
				},

				maxYongJifen: '', // 可用积分说明
				jifen: null, // 输入框输入的
				trueJifen: 0, // 实际抵扣积分

				orderId: '', // 订单id
				orderNo: '', // 订单编号
			}
		},
		computed: {
			totalMoney() {
				let money = 0
				money += Number(this.specification.price)  * Number(this.specification.quantity) 
				money += Number(this.details.postage) 
				money -= Number(this.specification.jfDeductionAmount)  *  Number(this.specification.quantity) 
				// 积分抵扣
				// if (money > (Number(this.specification.jfDeductionAmount) / 100) || money > (Number(this.jifen) / 100)) { // 房间费用大于 最多抵扣积分或者  输入的积分 才可以使用积分
				// 	if (Number(this.getCustomerInfo.rewardPoint) < Number(this.specification.jfDeductionAmount) && Number(this.jifen) >
				// 		Number(this.getCustomerInfo.rewardPoint)) {
				// 		// 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分
				// 		// console.log(' 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分');
				// 		this.trueJifen = parseFloat(((this.getCustomerInfo.rewardPoint / 100) * Number(this.getCustomerInfo.jifenDiscount))
				// 			.toFixed(2))
				// 		this.form.jifen = this.getCustomerInfo.rewardPoint
				// 	} else if (Number(this.jifen) > Number(this.specification.jfDeductionAmount)) {
				// 		// 积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的
				// 		// console.log('积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的');
				// 		this.trueJifen = parseFloat(((this.specification.jfDeductionAmount / 100) * Number(this.getCustomerInfo.jifenDiscount))
				// 			.toFixed(
				// 				2))
				// 		this.form.jifen = this.specification.jfDeductionAmount
				// 	} else {
				// 		// 积分充足 并且 输入的积分小于可抵扣的  取 输入的
				// 		// console.log('积分充足 并且 输入的积分小于可抵扣的  取 输入的');
				// 		this.trueJifen = parseFloat(((Number(this.jifen) / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(2))
				// 		this.form.jifen = this.jifen || 0
				// 	}
				// }
				money -= Number(this.trueJifen)
				return parseFloat((money).toFixed(2)) 
			},
			orderInfo() {
				let o = {
					orderNo: this.orderId,
					payType:1,
					sourceType:0,
					payPassword:'123456'
				}
				return o
			},
		},
		onReady() {
			// 去添加地址
			uni.$on('add-address', data => {
				this.details2 = data
			})
			// 去选择地址
			uni.$on('select-address', data => {
				console.log(data);
				this.details2 = data
			})
		},
		onLoad(params) {
			console.log(params);
			this.cid = params.cid // 商品id
			this.pageName = params.pageName // 默认为空， 积分 == 不显示优惠券
			try {
				this.specification = JSON.parse(params.specification) // 商品属性
			} catch (e) {
				console.error("商品数据错误");
			}
			this.getDetails1()
			this.getDetails2()


			this.maxYongJifen = '积分抵扣 ' + ( Number(this.specification.jfDeductionAmount) * Number(this.specification.quantity) || 0) + ' 元'

		},
		methods: {
			// 根据商品id查询商品详情
			getDetails1() {
				this.$http.post(this.$api.getJiFenProductById, {}, {
					params: {
						id: this.cid,
					}
				}).then(result => {
					if (result.code === 200) {
						this.details = result.data;
					} else {
						this.details = {}
					}
				}).catch(() => {
					this.details = {}
				})
			},
			// 获取默认收货地址
			getDetails2() {
				this.$http.post(this.$api.shop_order_6).then(result => {
					if (result.code === 200) {
						this.details2 = result.data
					} else {
						this.details2 = {}
					}
				}).catch(() => {
					this.details2 = {}
				})
			},
			// 生成订单
			createOrder() {

				if (!this.details2.id) {
					uni.showToast({
						title: '缺少收获地址',
						icon: 'none'
					})
					return
				}
				const _this = this
				this.$http.post(this.$api.payJfOrder, {
					productId: this.cid, // 商品ID
					skuId: this.specification.skuId, // 规格型号id
					productQuantity: this.specification.quantity, // 购买数量
					addressId: this.details2.id, // 地址id
				}).then(res => {
					if (res.code === 200) {
						_this.orderId = res.data.orderNs
						_this.orderNo = res.data.orderNs
						_this.$refs.commonPay.show()
					}
				})
			},
			// 积分支付成功
			payMoney(pwd) {
				// #ifdef MP-WEIXIN
				let url = this.$api.shop_order_7 + '?orderNo=' + this.orderNo + '&payType=0&sourceType=0&payPassword=' + pwd
				// #endif
				// #ifdef H5
				let url = this.$api.shop_order_7 + '?orderNo=' + this.orderNo + '&payType=0&sourceType=2&payPassword=' + pwd
				// #endif
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(url).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.redirectTo({
								url: './jifenOrderDetail?id=' + this.orderId
							});
						},600)
					} else {
						uni.showToast({
							title:'支付失败',
							icon: 'none'
						})
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: './jifenOrderDetail?id=' + this.orderId
					});
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: './jifenOrderDetail?id=' + this.orderId
					});
				},600)
			},
			// 输入积分
			inputJifen(e) {
				console.log(e);
				if (this.totalMoney < (e.detail.value / 100)) {
					return uni.showToast({
						title: '总价过低',
						icon: 'none'
					})
				} else if (e.detail.value > this.getCustomerInfo.rewardPoint) {
					return uni.showToast({
						title: '没有这么多的积分',
						icon: 'none'
					})
				} else if (e.detail.value > this.specification.jfDeductionAmount) {
					return uni.showToast({
						title: '最多只能使用' + this.specification.jfDeductionAmount + '积分抵扣',
						icon: 'none'
					})
				}
			},
			// 选择地址
			goRouter1() {
				uni.navigateTo({
					url: '/pagesUser/addressList'
				})
			},
			// 添加地址
			goRouter2() {
				uni.navigateTo({
					url: '/pagesUser/addressEdit'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay-content {
		background-color: #fff;
		border-radius: 10rpx;
		width: 660rpx;
	}

	.pay-title {
		padding: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			flex-shrink: 0;
			width: 40rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-row1 {
		text-align: center;
		color: $uni-color-error;
		font-size: 50rpx;
		padding: 50rpx;
	}

	.pay-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}

	.pr2-left {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	.pr2-right {
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}

	.pay-row3 {
		padding: 60rpx 30rpx;

		button {
			background-color: $blue;
			color: #fff;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.area-1 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.area-1-left {
		display: flex;
		align-items: center;
		color: #666;

		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			color: #666;

			&:nth-of-type(1) {
				font-size: 26rpx;

				text {
					margin-right: 20rpx;
				}
			}

			&:nth-last-of-type(1) {
				margin-bottom: 0
			}
		}
	}

	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;

		image {
			width: 14rpx;
			height: auto;
		}
	}

	.area-2 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}

	.area-2-card {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.a2c-title {
		display: flex;
		align-items: center;
		color: #666;
		margin-bottom: 30rpx;

		image {
			width: 30rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.a2c-content {
		display: flex;
	}

	.a2c-img {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.a2c-info {
		flex-grow: 1;
	}

	.a2c-info-title {
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.a2c-info1 {
		margin-bottom: 10rpx;
		color: #999;

		text {
			margin-right: 10rpx;
		}
	}

	.a2c-info2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.a2c-info-price {
		color: $uni-color-error;
		font-weight: bold;
		font-size: 30rpx;
	}

	.area-2-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 0;
	}

	.a2r-left {}

	.a2r-right {
		display: flex;
		align-items: center;

		image {
			width: 14rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}

	.a2r-tip {
		color: #999;
	}

	.a2r-price {
		color: $uni-color-error;
	}

	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftb-l {
		display: flex;
		align-items: center;

		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}

	.ftb-price {
		color: $uni-color-error;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			background-color: $uni-color-warning;
			color: #fff;
			font-size: 26rpx;
			padding: 20rpx 60rpx;
			border-radius: 10rpx;
		}
	}
</style>
